<template>
  <div class="container">
    <v-header :goBack="false" :title="title" :showRight="true">
      <router-link to="/market/debit-credit" class="fa fa-home" slot="icon-right"></router-link>
    </v-header>
    <div class="debit-credit-home" ref="scrollContent">
      <div class="d-flex flex-column homepage">
        <section class="nav-group d-flex">
          <div class="nav-item flex-fill">
            <p class="text-center">
              <img :src="images.debit" class="img" alt="极速借款" />
            </p>
            <label class="title text-center">极速借款</label>
          </div>
          <div class="nav-item flex-fill">
            <p class="text-center">
              <img :src="images.blackList" class="img" alt="查黑名单" />
            </p>
            <label class="title text-center">查黑名单</label>
          </div>
          <div class="nav-item flex-fill">
            <p class="text-center">
              <img :src="images.credit" class="img" alt="信用卡专享" />
            </p>
            <label class="title text-center">信用卡专享</label>
          </div>
          <div class="nav-item flex-fill">
            <p class="text-center">
              <img :src="images.feedback" class="img" alt="投诉建议" />
            </p>
            <label class="title text-center">投诉建议</label>
          </div>
        </section>
        <section class="slide-wrp">
          <cube-slide ref="slide" :data="banners">
            <cube-slide-item v-for="(item, index) in banners" :key="index" @click.native="onClickBanner(item.id)">
              <a href="javascript:void(0)">
                <img :src="item.pageBannerUrl">
              </a>
            </cube-slide-item>
          </cube-slide> 
        </section>
        <section>
          <img :src="images.creditOnly" alt="信用卡用户专享" />
        </section>
        <section class="recommend">
          <div class="line-title d-flex header">
            <h3 class="title">今日推荐</h3>
            <img class="img" src="/static/images/home/1-1.png" />
          </div>
          <div class="slide-wrp hide">
            <div class="slide-item" @click="clickHandler(recommend)">
              <img class="img" :src="recommend.pageBannerUrl" alt="slide" />
              <button class="btn-in">
                <span>进入专区</span>
                <i class="fa fa-angle-right"></i>
              </button>
            </div>
          </div>
        </section>
        <!-- <section class="section featured" v-if="featured.products">
          <div class="cards d-flex" v-for="(products, index) in featured.products" :key="index">
            <div class="card" 
              v-for="(product, idx) in products" 
              :key="idx"
              @click="toDetail(featured.id, product)">
              <div class="header d-flex align-items-center">
                <img class="logo" :src="product.productIcon" :alt="product.productName" />
                <h3 class="title">{{product.productName}}</h3>
              </div>
              <div class="main-content">
                <div class="content d-flex flex-column align-items-center">
                  <p class="desc">{{product.productDesc}}</p>
                  <div class="b-limit">
                    <p class="number text-center">{{product.productLimit}}</p>
                    <p class="limit-text text-center">最高可借(元)</p>
                  </div>
                  <cube-button :inline="true" :class="'btn-borrow'">
                    <span>立即借款</span>
                    <span class="circle">
                      <i class="fa fa-caret-right" aria-hidden="true"></i>
                    </span>
                  </cube-button>
                </div>
              </div>
            </div>
          </div>
        </section>
        <section class="loan">
          <div class="line-title border-bottom-1px d-flex">
            <h3 class="title">老司机带你找口子</h3>
          </div>
          <cube-tab-bar v-model="selectedLabel" show-slider>
            <cube-tab v-for="(item, index) in tabProducts" :label="item.pageName" :value="item.id" :key="index"></cube-tab>
          </cube-tab-bar>
          <cube-tab-panels v-model="selectedLabel">
            <cube-tab-panel v-for="(item, index) in tabProducts" :label="item.pageName" :value="item.id" :key="index">
              <ul>
                <li class="tab-panel-li" v-for="(product, index) in item.products" :key="index">
                  <div class="d-flex flex-column">
                    <a href="javascript:void(0)" @click="toDetail(item.id, product)">
                      <div class="card d-flex border-bottom-1px">
                        <img class="logo" :src="product.productIcon" :alt="product.productName" />
                        <div class="detail d-flex flex-column justify-content-between">
                          <div class="header d-flex">
                            <h3 class="title">{{product.productName}}</h3>
                            <label class="badge" v-if="product.productTips">{{product.productTips}}</label>
                          </div>
                          <p class="desc">{{product.productDesc}}</p>
                          <p class="limit">额度：<span class="number">{{product.productLimit}}</span></p>
                        </div>
                        <div class="flex-fill d-flex align-items-center justify-content-end">
                          <i class="fa fa-angle-right"></i>
                        </div>
                      </div>
                    </a>
                  </div>
                </li>
              </ul>
            </cube-tab-panel>
          </cube-tab-panels>
        </section> -->
        <div class="d-app d-flex flex-column align-items-center">
          <router-link to="/download-app" :class="'d-app-link'">下载app申请更多产品</router-link>
          <img src="/static/images/d-app.png" />
        </div>
      </div>
    </div>
    <v-footer></v-footer>
  </div>
</template>

<script type="text/ecmascript-6">
  import header from '@/components/header/head'
  import footer from '@/components/common/footer'
  import {home as homeApi, visitorReport} from '@/service/index'
  import {Storage, JwtToken, Config} from '@/config/mUtils'
  import {CHANGE_LIST_PAGE_DATA} from '@/store/mutation-types'
  import {mapState, mapMutations} from 'vuex'

  export default {
    data() {
      return {
        title: '首页',
        banners: [{id: 0, pageBannerUrl: require('@/assets/images/home/take-cash.png')}],
        recommend: [],
        featured: [],
        products: [],
        selectedLabel: 0,
        tabProducts: [],
        curBannerProductIdx: 0,
        curBannerProductIdxKey: 'cur_banner_product_index',
        images: {
          debit: require('@/assets/images/icon/quick-debit.png'),
          blackList: require('@/assets/images/icon/black-list.png'),
          credit: require('@/assets/images/icon/credit.png'),
          feedback: require('@/assets/images/icon/feedback.png'),
          creditOnly: require('@/assets/images/home/credit-only.png')
        }
      }
    },
    created() {
      if (this.$route.query.token && this.$route.query.token.length > 0) {
        JwtToken.set(this.$route.query.token)
      }
      let cbpidx = parseInt(Storage.getStore(this.curBannerProductIdxKey))
      if (cbpidx >= 0) {
        this.curBannerProductIdx = parseInt(cbpidx)
      }

      this.initData()
      visitorReport(1, Config.visitorReport.home)
      .then((resp) => {
        console.log(resp)
      })
      .catch((error) => {
        console.log(error)
      })
    },
    components: {
      'v-header': header,
      'v-footer': footer
    },
    methods: {
      initData() {
        homeApi()
        .then((resp) => {
          let data = resp.data.data
          // this.banners = data.bannerPage
          // this.banners.products = this.banners.products.list

          this.recommend = data.jrtjPage
          this.recommend.products = this.recommend.products.list

          this.featured = data.jxcpPage
          this.featured.products = this.featured.products.list
          let featured = []
          let chunkSize = 3
          for (let i = 0, len = this.featured.products.length; i < len; i = i + chunkSize) {
            featured.push(this.featured.products.slice(i, i + chunkSize))
          }
          this.featured.products = featured

          this.tabProducts = [data.ryfkPage, data.qtzzPage, data.bczxPage, data.defxPage]
          this.selectedLabel = this.tabProducts[0].id

          this.tabProducts.forEach((item, index) => {
            this.tabProducts[index].products = this.tabProducts[index].products.list
          })
        })
        .catch((error) => {
          console.log(error)
        })
      },
      toDetail(pageId, product) {
        this.toProduct(pageId, product)
      },
      clickHandler(item) {
        this.changePageData(item)
        this.$router.push(`/market/products/${item.id}/4`)
      },
      onClickBanner(pageId) {
        let idx = this.curBannerProductIdx
        this.curBannerProductIdx += 1
        if (this.curBannerProductIdx >= this.banners.products.length) {
          this.curBannerProductIdx = 0
        }
        Storage.setStore(this.curBannerProductIdxKey, this.curBannerProductIdx)
        this.toProduct(pageId, this.banners.products[idx])
      },
      toProduct(pageId, product) {
        if (parseInt(product.inIframe) === 1) {
          this.$router.push({
            path: `/market/debit-credit/detail/${product.id}/${pageId}`,
            query: {
              url: product.productLink
            }
          })
        } else {
          visitorReport(pageId, Config.visitorReport.product, product.id)
          .then((resp) => {
            console.log(resp)
            location.href = product.productLink
          })
          .catch((error) => {
            console.log(error)
          })
        }
      },
      ...mapMutations({changePageData: CHANGE_LIST_PAGE_DATA})
    },
    computed: {
      top() {
        let offset = -(this.activeIndex * 30)
        return `margin-top: ${offset}px`
      },
      ...mapState(['authorized'])
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../../common/stylus/variable.styl"
  @import "../../../common/stylus/mixin.styl"

  .debit-credit-home
    position: relative
    width: 100%
    height: 100%
    margin-top: 2rem;
    .homepage
      .nav-group
        .nav-item
          .img
            width: 60px
            height: 60px
          .title
            display: block
      .slide-wrp
        background: #fbf2ed
        .cube-slide
          .cube-slide-group
            .cube-slide-item
              height: 120px
              img
                height: 100%
                width: 100%
      .recommend
        margin-top: 10px
        .header
          background: $color-white
          .img
            height: 16px
            margin-left: 4px
          .badge
            margin-left: 16px
            padding: 8px 6px
            color: #fff
            background: #D81720
            font-size: 12px
            transform: rotate(-2deg)
        .slide-wrp
          padding: 0 1.6%
          .slide-item
            position: relative
            height: 110px
            .img
              height: 100%
              min-width: 100%
              max-width: 100%
              border-radius: 10px
            .btn-in
              position: absolute
              padding: 2px 8px 2px 6px
              border-width: 0
              border-radius: 4px
              top: 50%
              right: 0
              transform: translate(0, -50%)
              background: rgba(7, 17, 27, 0.6)
              color: $color-white
      .featured
        padding: 2.41899% 1.2%
        margin-top: 0px
        .cards
          margin-top: 6px
          .card
            flex: 0 0 28%
            width: 28%
            padding: 10px 8px
            margin-left: 4px
            border-1px()
            &:first-child
              margin-left: 0
            .header
              .logo
                flex: 0 0 20px
                width: 20px
                height: 20px
              .title
                margin-left: 6px
                font-size: 14px
            .main-content
              .content
                line-height: 22px;
                .desc
                  width: 100%
                  max-width: 100%
                  height: 16px
                  line-height: 17px
                  margin-top: 8px
                  background: $color-light-grey-ss
                  color: $color-light-grey
                  border-radius: 2px
                  white-space: nowrap
                  font-size: 10px
                  text-align: center
                  text-overflow: ellipsis
                  overflow: hidden
                .b-limit
                  margin-top: 8px
                  .number
                    color: #ff8a00
                    font-size: 18px
                    font-weight: 600
                .limit-text
                  font-size: 12px
                .btn-borrow
                  padding: 4px 12px
                  margin-top: 4px
                  border-radius: 20px
                  background: #ff8a00
                  font-size: 13px
                  .circle
                    position: relative
                    display: inline-block
                    width: 10px
                    height: 10px
                    background: #ff8a00
                    border-radius: 50%
                    border: 1px $color-white solid
                    vertical-align: middle
                    .fa-caret-right
                      position: absolute
                      top: 50%
                      left: 50%
                      transform: translate(-50%, -50%)
                      font-size: 10px
                      text-align: center
      .loan
        margin-top: 10px
        .cube-tab-bar
          background: $color-white
          .cube-tab
            padding: 12px 0px
            text-align: center
        .cube-tab-panels
          margin-top: 10px
          .cube-tab-panels-group
            .cube-tab-panel
              .tab-panel-li
                background: $color-white
                .card
                  padding: 12px 3.833333%
                  text-align: center
                  .logo
                    flex: 0 0 60px
                    width: 60px
                    height: 60px
                  .detail
                    line-height: 22px
                    margin-left: 24px
                    .header
                      .title
                        color: #333
                        font-size: 16px
                        text-align: left 
                      .badge
                        height: 16px
                        line-height: 17px
                        margin-left: 16px
                        padding: 0 6px
                        border-radius: 10px
                        color: #fff
                        background: #D81720
                        font-size: 10px
                    .desc
                      font-size: 12px
                      color: #b2b2b2
                      text-align: left
                    .limit
                      text-align: left
                      color: $color-dark-grey
                      .number
                        color: #ff8a00
      .d-app
        padding: 14px 12px 12px 12px
        background: $color-white
        margin-bottom: 40px
        img
          height: 58px
        .d-app-link
          height: 22px
          line-height: 22px
          padding: 0 12px
          border: 1px solid $color-dark-grey
          border-radius: 10px
          text-decoration: none
          color: $color-dark-grey
          font-size: 13px
          text-align: center
  .line-title
    padding: 20px 0 12px 4%
    background: $color-white
    .title
      padding-left: 8px
      font-weight: 500
      font-size: 16px
      border-left: 3px solid #ff8a00
</style>
